<template>
  <div>
    <el-table
      :data="plantable"
      stripe
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="hash.tcontent" label="培训内容"></el-table-column>
      <el-table-column prop="hash.ttypename" label="培训形式"></el-table-column>
      <!-- <el-table-column
        prop="sex"
        label="培训对象"
      >
      </el-table-column>-->
      <el-table-column prop="hash.classifyname" label="培训分类"></el-table-column>
      <el-table-column prop="hash.company" label="培训单位"></el-table-column>
      <el-table-column label="培训时间段">
        <template slot-scope="scope">{{scope.row.hash.pre_begintime}}至{{scope.row.hash.pre_endtime}}</template>
      </el-table-column>
      <el-table-column label="计划状态">
        <template slot-scope="scope">
          <div v-if="scope.row.hash.isbegin=='0'" style="color:red">未开始</div>
          <div v-else>已开始</div>
        </template>
      </el-table-column>
      <el-table-column label="实际开始时间">
        <template slot-scope="scope">{{scope.row.hash.starttime}}至{{scope.row.hash.endtime}}</template>
      </el-table-column>

      <el-table-column label="是否有证">
        <template slot-scope="scope">
          <div v-if="scope.row.hash.has_cert=='0'">否</div>
          <div v-if="scope.row.hash.has_cert=='1'">是</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="planstart(scope.row)"
            v-if="scope.row.hash.isbegin=='0'"
          >开始</el-button>
          <el-button size="mini" type="primary" @click="planresult(scope.row)">执行结果</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="pagobj.currentPage3"
      :pageSize="pagobj.pagesize"
      layout="total, prev, pager, next"
      :total="pagobj.total"
      style="margin:20px 0;text-align:center"
    ></el-pagination>

    <el-dialog title="计划开始" :visible.sync="dialogVisible2" width="40%">
      <el-form labelWidth="150px">
        <el-form-item label="实际人" style="width:100%" class="is-required">
          <!-- <el-select
            v-model="actperson"
            multiple
            placeholder="请选择"
            style="width:100%"
            @remove-tag="removetag"
            clearable
          >
            <el-option
              v-for="item in jbrList"
              :key="item.value"
              :label="item.hash.username"
              :value="item.hash.pid"
            ></el-option>
          </el-select>-->
          <el-select v-model="mineStatus" placeholder="请选择" multiple collapseTags>
            <el-option :value="mineStatusValue" style="height: auto">
              <el-tree
                :data="arr"
                showCheckbox
                nodeKey="id"
                ref="tree"
                highlightCurrent
                :props="defaultProps"
                @check-change="handleCheckChange"
              ></el-tree>
            </el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!flag">请选择实际人</div>
        </el-form-item>
        <el-form-item label="代表人" class="is-required">
          <el-select
            v-model="reqperson"
            placeholder="请选择"
            style="width:100%"
            clearable
            :disabled="mineStatusValue.length==0"
          >
            <el-option
              v-for="item in mineStatusValue"
              :key="item.label"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="reqperson==''">请选择代表人</div>
        </el-form-item>
        <el-form-item label="实际时间" class="is-required">
          <el-date-picker
            v-model="acttime"
            type="daterange"
            style="width:100%"
            rangeSeparator="至"
            startPlaceholder="实际开始日期"
            endPlaceholder="实际结束日期"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
          <div class="el-form-item__error" v-if="acttime[0]==''||acttime[1]==''">请选择培训日期</div>
        </el-form-item>
        <!-- <el-form-item label="实际开始时间" class="is-required">
          <el-date-picker
            v-model="acttime"
            type="date"
            style="width:100%"
            placeholder="选择日期"
            valueFormat="yyyy-MM-dd"
          >
          </el-date-picker>
          <div class="el-form-item__error" v-if="acttime==''">
            请选择实际开始时间
          </div>
        </el-form-item>-->
        <el-form-item>
          <span>&nbsp;</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible2 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitstartplan">提 交</el-button>
      </span>
    </el-dialog>

    <el-dialog title="计划执行结果" :visible.sync="dialogVisible3" width="50%">
      <el-form labelWidth="100px" style="min-height:200px">
        <el-form-item label="培训内容：">{{planData.tcontent}}</el-form-item>
        <el-form-item label="培训形式：">{{planData.ttypename}}</el-form-item>
        <el-form-item label="培训分类：">{{planData.classifyname}}</el-form-item>
        <el-form-item label="培训单位：">{{planData.company}}</el-form-item>
        <el-form-item label="培训时间：">{{planData.pre_begintime}} 至 {{planData.pre_endtime}}</el-form-item>
        <el-form-item label="计划人员：">{{planData.jhusername}}</el-form-item>
        <div v-if="planData.isbegin=='1'">
          <el-form-item label="实际开始时间：">{{planData.starttime}} 至 {{planData.endtime}}</el-form-item>
          <el-form-item label="是否有证：">
            <span
              v-if="planData.has_cert=='1'"
              class="equi-span equi-shebei"
              style="margin-top:10px"
            >发证</span>
            <span v-else class="equi-span equi-shebei" style="margin-top:10px">不发证</span>
          </el-form-item>
          <el-form-item label="培训报告：">
            <span v-for="(item, index) in fileArr" :key="index">
              <a :href="item.hash.fileurl" target="_blank" download>{{item.hash.filename}} 下载</a>
              <br/>
            </span>
          </el-form-item>
        </div>
      </el-form>
      <div v-if="planData.isbegin=='1'">
        <span style="display:inline-block;width:100%;border-bottom:2px solid #f1f1f1;margin:10px 0"></span>
        <p
          style="padding:10px 0;font-size:16px;text-align:center;font-weight:bold;margin:10px 0"
        >实际执行人员</p>
        <el-table :data="actpersonArr" border style="width: 100%">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="hash.username" label="姓名"></el-table-column>
          <el-table-column prop="name" label="是否为代表人">
            <template slot-scope="scope">
              <div v-if="scope.row.hash.isrepresent=='1'">是</div>
              <div v-else>否</div>
            </template>
          </el-table-column>
          <el-table-column label="附件数量(点击查看)">
            <template slot-scope="scope">
              <div
                style="cursor:pointer;color:#26a2ff"
                @click="showfilearr(scope.row)"
              >{{scope.row.hash.filenum}}</div>
            </template>
          </el-table-column>
          <el-table-column label="上传证书">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="uploadreport(scope.row)">选择文件</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog width="30%" title="上传报告" :visible.sync="dialogVisible4" appendToBody>
        <upload2
          :filelimit="100"
          :filelink.sync="reportArr"
          :isedit="false"
          :ispic="false"
          v-if="isreloadupload"
        ></upload2>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible4 = false">取 消</el-button>
          <el-button type="primary" @click="submitreport">上 传</el-button>
        </div>
      </el-dialog>
      <el-dialog title="查看附件" :visible.sync="dialogVisible5" appendToBody>
        <el-table :data="filetable" stripe style="width: 100%">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="hash.filename" label="附件名称"></el-table-column>
          <el-table-column label="附件操作">
            <template slot-scope="scope">
              <a :href="scope.row.hash.fileurl" target="_blank" download>下载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import upload2 from '~/components/common/upload2.vue';

export default {
  components: {
    upload2,
  },
  props: {
    plantable: {
      type: Array,
      required: true,
    },
    pagobj: {
      type: Object,
      required: true,
    },
    choosedp: Array,
  },
  data() {
    return {
      isreloadupload: true,
      reportArr: [],
      filetable: [],
      jbrList: [],
      ts: this.newStore(),
      planstartid: '',
      flag: false,
      actperson: [],
      actpersonArr: [],
      fileArr: [],
      uploadreportid: '',
      acttime: ['', ''],
      planresultid: '',
      reqperson: '',
      radio: '1',
      mineStatus: '',
      mineStatusValue: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      arr: [],
      chooseperson: [],
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      planData: {},
    };
  },

  created() {
    this.getjbrList();
    this.getTree();
  },
  methods: {
    selectable(row) {
      if (row.hash.isbegin == '1') {
        return false;
      }
      return true;
    },
    // 查看报告附件
    showfilearr(item) {
      console.log(item);
      const req2 = {
        handle:
          '33224548EFC2E94F97536D55316F44F20FAD24CFA917A95F048FCE57D62C0B8B44B455B1B2775577',
        id: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req2).then((ts) => {
        this.filetable = ts.d.data.operation1;
        this.dialogVisible5 = true;
      });
    },
    reload() {
      this.isreloadupload = false;
      this.$nextTick(() => {
        this.isreloadupload = true;
      });
    },
    // 公共方法图片数组转路径数组
    posturl(arr) {
      const a = [];
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url);
      }
      return a;
    },
    // 公共方法图片数组转名称数组
    postname(arr) {
      const b = [];
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name);
      }
      return b;
    },
    submitreport() {
      const req = {
        handle:
          '33224548EFC2E94F8BCA03EC613FED98F37D39E64D36BC9A048FCE57D62C0B8B44B455B1B2775577',
        id: this.uploadreportid,
        filename: this.postname(this.reportArr),
        fileurl: this.posturl(this.reportArr),
      };
      console.log(req);

      this.spost(this.ts, '/mainservlet', req).then(() => {
        const req2 = {
          handle: '33224548EFC2E94F97536D55316F44F2C07046ED2C6C984F',
          id: this.planresultid,
        };
        this.spost(this.ts, '/mainservlet', req2).then((ts) => {
          this.planData = ts.d.data.operation1[0].hash;
          this.actpersonArr = ts.d.data.operation3;
          this.fileArr = ts.d.data.operation4;

          this.$message({
            type: 'success',
            message: '提交成功',
          });
          this.dialogVisible4 = false;
        });
      });
    },
    // 上传报告
    uploadreport(item) {
      this.reportArr = [];
      this.reload();
      this.uploadreportid = item.hash.id;
      this.dialogVisible4 = true;
    },
    // 查看执行结果
    planresult(item) {
      console.log(item);
      this.planresultid = item.hash.id;
      const req = {
        handle: '33224548EFC2E94F97536D55316F44F2C07046ED2C6C984F',
        id: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.planData = ts.d.data.operation1[0].hash;
        this.actpersonArr = ts.d.data.operation3;
        this.fileArr = ts.d.data.operation4;

        this.dialogVisible3 = true;
      });
    },

    // 提交计划开始
    submitstartplan() {
      if (
        this.chooseperson.length == 0 ||
        this.reqperson == '' ||
        this.acttime[0] == '' ||
        this.acttime[1] == ''
      ) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
        return;
      }
      this.$confirm('确认提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const req = {
            handle:
              '33224548EFC2E94FD85E6B18F193A90EF98DA1F6FDDFD3DCD760B72E2D1B9492',
            starttime: this.acttime[0],
            endtime: this.acttime[1],
            pid: this.chooseperson,
            presentpid: this.reqperson,
            id: this.planstartid,
          };
          this.spost(this.ts, '/mainservlet', req).then(() => {
            console.log(req, 'req');
            this.$message({
              type: 'success',
              message: '提交成功',
            });
            this.$parent.getplanlist();
            this.dialogVisible2 = false;
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
    removetag(val) {
      console.log(val);
      this.reqperson = '';
    },
    // 计划开始
    planstart(item) {
      console.log(item);
      this.actperson = [];
      this.reqperson = '';
      this.acttime = '';
      this.planstartid = item.hash.id;
      this.$nextTick(() => {
        this.dialogVisible2 = true;
      });
    },
    // 获取经办人列表
    getjbrList() {
      this.jbrList = [];
      const req = {
        handle:
          '45EE8FEFE87870C53A0536D8566DA8C94345851CDDF60960CBCA139672EA5B8C230BE336D992C9E341DC33B3A5E90841',
        query: '',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.jbrList = ts.d.data.operation1;
      });
    },
    // 翻页
    handleCurrentChange() {
      this.$parent.getplanlist();
    },
    handleSelectionChange(val) {
      this.$emit('update:choosedp', val);
    },

    shows3() {
      this.$nextTick(() => {
        this.dialogVisible3 = true;
      });
    },

    // 获取Tree是数据
    getTree() {
      const req = {
        handle:
          '45EE8FEFE87870C53A0536D8566DA8C94345851CDDF60960CBCA139672EA5B8C230BE336D992C9E341DC33B3A5E90841',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.getTreedata(ts.d.data.operation1);
        }
      });
    },
    // 树形控件
    handleCheckChange(data, checked, indeterminate) {
      const res = this.$refs.tree.getCheckedNodes(true, true); // 这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      const arrLabel = [];
      const arr = [];
      const tt = [];
      res.forEach((item) => {
        arrLabel.push(item.label);
        arr.push(item);
        tt.push(item.id);
      });
      this.mineStatusValue = arr;
      this.mineStatus = arrLabel;
      this.chooseperson = tt;
      // console.log(this.mineStatus,'this.minestatus')
      // console.log(this.mineStatusValue,'this.minestatuvalue')
      if (arr.length > 0) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    getTreedata(data) {
      const arr = data;
      const arr1 = arr.map(item => item.hash);
      const date = [];
      const obj = {
        id: 987654321,
        label: '全部',
        children: [],
      };
      arr1.forEach((item) => {
        if (!date.includes(item.orgname)) {
          date.push(item.orgname);
        }
      });
      const ars = [];
      date.forEach((item, ind) => {
        ars.push({
          id: ind,
          label: item,
          children: [],
        });
      });
      arr1.forEach((item) => {
        ars.forEach((file) => {
          if (file.label === item.orgname) {
            file.children.push({
              id: item.pid,
              label: item.username,
            });
          }
        });
      });
      obj.children = ars;
      this.arr.push(obj);
    },
  },
};
</script>

<style socped>
.el-form-item {
  width: 80%;
  margin-bottom: 22px;
}
</style>
